<template>
  <div id="">
    <headerbox :headerTitle="'预约信息'" :hasBack="true"></headerbox>
    <div class="p10 bgWhite justify-content mb10">
      <img :src="imgUrlLink(skillItem.ballUser.headPortrait)" alt="" width="80" height="80">
      <div class="ml10 matchTop">
        <h3>{{skillItem.ballUser.nickName}}</h3>
        <ul class="matchAuth">
          <li>
            <span>性别：{{getSex(skillItem.ballUser.sex)}}</span>
            <span>年龄：{{skillItem.ballUser.age}}</span>
          </li>
          <li>
            <span>
              <img :src="imgUrlLink(skillItem.classify.minIcon)" alt="" width="10">
              {{sportsLev()}}
            </span>
            <span v-if="skillItem.cost">陪练价：<em>&yen;{{skillItem.cost}}</em>/小时</span>
            <span v-if="skillItem.amount">陪练价：<em>&yen;{{skillItem.amount}}</em>元</span>
          </li>
        </ul>
      </div>
    </div>

    <ul class="formList mb10">
      <li>预约陪练地址</li>
      <li><b>{{skillItem.activeAddr || skillItem.agreedAddr}}</b></li>
    </ul>
    <ul class="formList" v-if="!isNeed">
      <li>预约陪练时间</li>
      <li @click="setStartTime">
        <span>开始时间</span>
        <input type="text" name="" v-model="orderJson.startTime" readonly placeholder="请选择开始时间">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="setEndTime">
        <span>结束时间</span>
        <input type="text" name="" v-model="orderJson.endTime" readonly placeholder="请选择结束时间">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
    </ul>

    <div class="fixedButtom">
      <button type="button" name="button" class="blockButton" @click="submitReservation">确认预约</button>
    </div>

    <mt-datetime-picker
      ref="datepicker"
      type="datetime"
      v-model="pickerValue"
      :startDate="startDate"
      @confirm="dateConfirm">
    </mt-datetime-picker>
  </div>
</template>
<script>
import {orderPush,orderRobbing} from '@/utils/ajaxRequest.js';
import {dateChangeTime} from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    pickerValue:'',

    startDate: new Date(),     //日历picker开始日期
    orderJson:{
      token:'',
      skill_Id:'',
      startTime:'',     //开始时间
      endTime:'',       //结束时间
      lng:'',
      lat:'',
    },
    skillItem:'',
    isNeed:false,
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    sportsLev() {
      switch (this.skillItem.sportsLev) {
        case 0:
          return '初级'
          break;
        case 1:
          return '中级'
          break;
        case 2:
          return '高级'
          break;
        default:

      }
    },
    getSex(sex) {
      switch (sex) {
        case 0:
          return '女'
          break;
        case 1:
          return '男'
          break;
        default:

      }
    },
    // 获取浏览器所在的定位
    geolocation() {
      let self = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          console.log(r.point.lng+','+r.point.lat);
          // 获取经纬度
          self.orderJson.lng = r.point.lng;
          self.orderJson.lat = r.point.lat;
        }
        else {
          alert('failed'+this.getStatus());
        }
      })
    },
    // 设置开始时间
    setStartTime() {
      this.$refs.datepicker.open();
      this.dateEvent = '开始时间';
    },
    // 设置结束时间
    setEndTime() {
      this.$refs.datepicker.open();
      this.dateEvent = '结束时间';
    },
    dateConfirm(values) {
      console.log(dateChangeTime(values));
      switch (this.dateEvent) {
        case '开始时间':
          this.orderJson.startTime = dateChangeTime(values);
          break;
        case '结束时间':
          this.orderJson.endTime = dateChangeTime(values);
          break;
        default:

      }
    },
    // 确认预约
    submitReservation() {
      let self = this;
      let isNeed = self.isNeed;   //是否需求订单
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      if (isNeed) {   //需求下单
        let orderParam = {
          token:xlyd_loginInfo.token,
          orderId:this.skillItem.id,
        }
        orderRobbing(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(-1);
          }
        })
      }else{    //技能下单 找陪练。。。
        let orderParam = self.orderJson;
        if (orderParam.startDate=='' || orderParam.endTime == '') {
          self.toast('请选择您需要的预约时间');
          return false;
        }
        orderPush(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(-1);
          }
        })
      }

    }
  },
  created() {
    //do something after creating vue instance
    this.geolocation();
  },
  mounted() {
    //do something after mounting vue instance
    let skillItem = this.$route.params.skillItem;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    console.log(skillItem);
    if(!skillItem){
      this.$router.go(-1);
    }else {
      this.skillItem = skillItem;
      this.orderJson.skill_Id = skillItem.id;
      this.orderJson.token = xlyd_loginInfo.token;
      this.isNeed = this.$route.params.isNeed;
    }
  }
}
</script>
<style lang="scss" scoped>
.matchTop{
  @include flexcell;
  @include flex;
  height: 80px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.matchAuth{
  width: 100%;
  li{
    line-height: 1.4em;
    @include flex;
    span{
      width: 50%;
    }
  }
}
</style>
